<template>
  <Row id="article">
      <mavon-editor
        class="markdown"
        :value="articleDetail.context"
        :subfield = "prop.subfield"
        :defaultOpen = "prop.defaultOpen"
        :toolbarsFlag = "prop.toolbarsFlag"
        :editable="prop.editable"
        :scrollStyle="prop.scrollStyle"
      ></mavon-editor>
  </Row>
</template>

<script>
    export default {
      name: "Article",
      data() {
        return {
          article_id:this.$route.params.article_id,
          articleDetail:{
            context:""
          }
        }
      },
        computed: {
        prop () {
          let data = {
            subfield: false,// 单双栏模式
            defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
            editable: false,
            toolbarsFlag: false,
            scrollStyle: true
          };
          return data
        }
      },
      methods:{
        gettext() {
          this.$axios({
            method: 'post',
            url: 'tp5_jzt-blog_server/public/index.php/home/articletext',
            data:{
              article_id:this.article_id
            },
          }).then((res) => {
            // console.log(res.data);
            this.articleDetail.context=res.data;
          }).catch((error) => {
            console.log(error)
          })
        },
      },
      created() {
        this.gettext();
      }
    }
</script>

<style scoped>
  #article{
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  @media screen and (min-width: 769px) {
    #article{
      width: 60%;
      height: 100%;
      margin: 0 auto;
    }
  }

.markdown{
  height: 100%;
}
</style>
